<template>
  <div class="server-setting">
    <div class="details-head">
      <el-breadcrumb slot="breadcrumb">
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="detail-card">
      <el-form
        ref="record"
        label-position="top"
        :model="record"
        :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="host" label="主机地址">
              <el-input v-model="record.host"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="port" label="主机端口">
              <el-input v-model.number="record.port"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="title" label="站点标题">
              <el-input v-model="record.title"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="smtp_host" label="邮箱 SMTP 地址">
              <el-input v-model="record.smtp_host"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="smtp_port" label="邮箱 SMTP 端口">
              <el-input v-model.number="record.smtp_port"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="smtp_secure" label="邮箱 SMTP 安全码">
              <el-input v-model="record.smtp_secure"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="smtp_user" label="邮箱 SMTP 用户名">
              <el-input v-model="record.smtp_user"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="smtp_password" label="邮箱 SMTP 密码">
              <el-input type="password" v-model="record.smtp_password"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="sms_url" label="短信发送服务器">
              <el-input v-model="record.sms_url"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="sms_account" label="短信账号">
              <el-input v-model="record.sms_account"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="sms_token" label="短信认证Token">
              <el-input v-model="record.sms_token"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item prop="sms_model" label="短信模板ID">
              <el-input v-model="record.sms_model"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="oper-area">
      <el-button type="success" @click="save" :disabled="disabled">保存</el-button>
    </div>
  </div>
</template>


<script>
  import { mapActions } from 'vuex'

  export default {
    name: 'server-setting',
    data() {
      return {
        url: '/setting',
        record: {},
        hash: '',
        rules: {
          'host': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'port': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'title': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'smtp_host': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'smtp_port': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'smtp_secure': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'smtp_user': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'smtp_password': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'sms_url': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'sms_account': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'sms_token': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
          'sms_model': [
            {
              'required': true,
              'message': '请输入',
            },
          ],
        },
      }
    },
    methods: {
      ...mapActions(['LOGIN']),
      loadData() {
        this.$httpGet(this.url).then((response) => {
          this.record = response.data
          this.hash = JSON.stringify(this.record)
        }).catch(() => {})
      },
      save() {
        if (this.disabled) {
          return
        }
        this.$refs.record.validate((valid) => {
          if (!valid) {
            return
          }
          this.$httpPut(this.url, this.record).then(() => {
            this.$message.success('编辑成功')
            document.title = this.record.title
            const user = this.$store.state.user
            user.title = this.record.title
            user.host = this.record.host
            user.port = this.record.port
            this.LOGIN(user)
            this.loadData()
          })
        })
      },
    },
    created() {
      this.loadData()
    },
    computed: {
      disabled() {
        return this.hash === JSON.stringify(this.record)
      },
    },
  }
</script>


<style lang="scss">
  .server-setting {
  }
</style>
